const { isMp } = require('./shared.js')
const path = require('path')
const plugin = require('tailwindcss/plugin')

function addComponents() {
	return plugin((ctx) => {
		ctx.addComponents({
			'.page-bg': {
				background: `
					linear-gradient(to bottom, transparent, #fff 400rpx),
					linear-gradient(to right, #beecd0 20%, #f4e2d8); 
				`
			},
			'.center': {
				'@apply flex justify-center items-center': {}
			},
			'.full': {
				'@apply w-full h-full': {}
			}
		})
	})
}

function resolve(p) {
	return path.resolve(__dirname, p)
}

/** @type {import('tailwindcss').Config} */
module.exports = {
	content: ['./index.html', './pages/**/*.vue', './components/**/*.vue'].map(resolve),
	theme: {
		extend: {
			colors: {
				primary: '#19B98D',
				mp_tc3: '#AFAFAF'
			},
			fontSize: {
				1: '22rpx',
				2: '24rpx',
				3: '26rpx',
				4: '28rpx'
			},
			textShadow: {
				default: '1px 1px 2px rgba(0, 0, 0, 0.5)',
				md: '2px 2px 4px rgba(0, 0, 0, 0.5)',
				lg: '3px 3px 6px rgba(0, 0, 0, 0.5)'
			}
		}
	},
	plugins: [addComponents(),require('tailwindcss-textshadow')],
	// 启用或禁用特定的核心插件
	corePlugins: {
		// 基础样式重置 true表示开启 false禁用 默认是开启
		preflight: false,
		// 容器类
		container: !isMp
	}
}
